<!DOCTYPE html PUBLIC "shuangmu">
<html xmlns="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="shortcut icon" href="../static/img/favicon.ico"/>
    <title>shuangmu</title>
    <script src="../static/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        html {
            overflow: hidden;
            -ms-touch-action: none;
            -ms-content-zooming: none;
        }

        body {
            position: absolute;
            margin: 0px;
            padding: 0px;
            background: #ffffff;
            width: 100%;
            height: 100%;
        }

        #canvas {
            position: absolute;
            background: black;
            width: 100%;
            height: 100%;
            background: #fff;
        }

        #d1 {
            width: 290px;
            height: 40px;
            /* border: #000000 solid 1px; */
            position: fixed;
            right: 0px;
            top: 2px;

        }

        #i1 {
            height: 30px;
            width: 150px;
            line-height: 30px;
            font-size: 15px;
            border-radius: 10px;
            border: #000000 1px solid;
            outline: 0;
        {#margin: 0px;#}{#padding: 0px;#}

        }

        #d1 form {
            margin: 5px auto;
        }

        #d1 #i2 {
            height: 32px;
            width: 50px;
            border-radius: 10px;
            border: #000000 1px solid;
            background: #FFFFFF;
            outline: 0
        }

        #d1 #i3 {
            height: 32px;
            width: 60px;
            border-radius: 10px;
            border: 1px solid;
            background: #FFFFFF;
            outline: 0
        }
    </style>

    <script type="text/javascript" src="../static/js/ge1doot.js"></script>
    <script type="text/javascript">
        var list_ = ['../static/img/1.jpg', '../static/img/2.jpg', '../static/img/3.jpg', '../static/img/4.jpg', '../static/img/5.jpg', '../static/img/6.jpg', '../static/img/7.jpeg', '../static/img/8.jpg', '../static/img/9.jpg', '../static/img/10.gif', '../static/img/11.jpg', '../static/img/12.jpg']
        if ({{ list_jpg|safe }}!=
        1
        )
        {
            list_ =
            {{ list_jpg|safe }}
        }

        "use strict";
        (function () {

            /* ==== definitions ==== */
            var diapo = [],
                layers = [],
                ctx, pointer, scr, camera, light, fps = 0,
                quality = [1, 2],
                // ---- poly constructor ----
                Poly = function (parent, face) {
                    this.parent = parent;
                    this.ctx = ctx;
                    this.color = face.fill || false;
                    this.points = [];
                    if (!face.img) {
                        // ---- create points ----
                        for (var i = 0; i < 4; i++) {
                            this.points[i] = new ge1doot.transform3D.Point(
                                parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),
                                parent.pc.y + face.y[i],
                                parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)
                            );
                        }
                        this.points[3].next = false;
                    }
                },
                // ---- diapo constructor ----
                Diapo = function (path, img, structure) {
                    // ---- create image ----
                    this.img = new ge1doot.transform3D.Image(
                        this, path + img.img, 1, {
                            isLoaded: function (img) {
                                img.parent.isLoaded = true;
                                img.parent.loaded(img);
                            }
                        }
                    );
                    this.visible = false;
                    this.normalX = img.nx;
                    this.normalZ = img.nz;
                    // ---- point center ----
                    this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);
                    // ---- target positions ----
                    this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);
                    this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);
                    // ---- create polygons ----
                    this.poly = [];
                    for (var i = -1, p; p = structure[++i];) {
                        layers[i] = (p.img === true ? 1 : 2);
                        this.poly.push(
                            new Poly(this, p)
                        );
                    }
                },
                // ---- init section ----
                init = function (json) {
                    // draw poly primitive
                    Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;
                    // ---- init screen ----
                    scr = new ge1doot.Screen({
                        container: "canvas"
                    });
                    ctx = scr.ctx;
                    scr.resize();
                    // ---- init pointer ----
                    pointer = new ge1doot.Pointer({
                        tap: function () {
                            if (camera.over) {
                                if (camera.over === camera.target.elem) {
                                    // ---- return to the center ----
                                    camera.target.x = 0;
                                    camera.target.z = 0;
                                    camera.target.elem = false;
                                    $('#d1').show(500)
                                    $('#a1').show(500)

                                } else {
                                    // ---- goto diapo ----
                                    camera.target.elem = camera.over;
                                    camera.target.x = camera.over.tx;
                                    camera.target.z = camera.over.tz;
                                    // ---- adapt tesselation level to distance ----
                                    for (var i = 0, d; d = diapo[i++];) {
                                        var dx = camera.target.x - d.pc.x;
                                        var dz = camera.target.z - d.pc.z;
                                        var dist = Math.sqrt(dx * dx + dz * dz);
                                        var lev = (dist > 1500) ? quality[0] : quality[1];
                                        d.img.setLevel(lev);
                                    }
                                    $('#d1').hide(500)
                                    $('#a1').hide(500)

                                }
                            }
                        }
                    });
                    // ---- init camera ----
                    camera = new ge1doot.transform3D.Camera({
                        focalLength: Math.sqrt(scr.width) * 10,
                        easeTranslation: 0.025,
                        easeRotation: 0.06,
                        disableRz: true
                    }, {
                        move: function () {
                            this.over = false;
                            // ---- rotation ----
                            if (pointer.isDraging) {
                                this.target.elem = false;
                                this.target.ry = -pointer.Xi * 0.01;
                                this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);
                            } else {
                                if (this.target.elem) {
                                    this.target.ry = Math.atan2(
                                        this.target.elem.pc.x - this.x,
                                        this.target.elem.pc.z - this.z
                                    );
                                }
                            }
                            this.target.rx *= 0.9;
                        }
                    });
                    camera.z = -10000;
                    camera.py = 0;
                    // ---- create images ----
                    for (var i = 0, img; img = json.imgdata[i++];) {
                        diapo.push(
                            new Diapo(
                                json.options.imagesPath,
                                img,
                                json.structure
                            )
                        );
                    }
                    // ---- start engine ---- >>>
                    setInterval(function () {
                        quality = (fps > 50) ? [2, 3] : [1, 2];
                        fps = 0;
                    }, 1000);
                    run();
                },
                // ---- main loop ----
                run = function () {
                    // ---- clear screen ----
                    ctx.clearRect(0, 0, scr.width, scr.height);
                    // ---- camera ----
                    camera.move();
                    // ---- draw layers ----
                    for (var k = -1, l; l = layers[++k];) {
                        light = false;
                        for (var i = 0, d; d = diapo[i++];) {
                            (l === 1 && d.draw()) ||
                            (d.visible && d.poly[k].draw());
                        }
                    }
                    // ---- cursor ----
                    if (camera.over && !pointer.isDraging) {
                        scr.setCursor("pointer");
                    } else {
                        scr.setCursor("move");
                    }
                    // ---- loop ----
                    fps++;
                    requestAnimFrame(run);
                };
            /* ==== prototypes ==== */
            Poly.prototype.draw = function () {
                // ---- color light ----
                var c = this.color;
                if (c.light || !light) {
                    var s = c.light ? this.parent.light : 1;
                    // ---- rgba color ----
                    light = "rgba(" +
                        Math.round(c.r * s) + "," +
                        Math.round(c.g * s) + "," +
                        Math.round(c.b * s) + "," + (c.a || 1) + ")";
                    ctx.fillStyle = light;
                }
                // ---- paint poly ----
                if (!c.light || this.parent.light < 1) {
                    // ---- projection ----
                    for (
                        var i = 0; this.points[i++].projection();
                    ) ;
                    this.drawPoly();
                    ctx.fill();
                }
            }
            /* ==== image onload ==== */
            Diapo.prototype.loaded = function (img) {
                // ---- create points ----
                var d = [-1, 1, 1, -1, 1, 1, -1, -1];
                var w = img.texture.width * 0.5;
                var h = img.texture.height * 0.5;
                for (var i = 0; i < 4; i++) {
                    img.points[i] = new ge1doot.transform3D.Point(
                        this.pc.x + (w * this.normalZ * d[i]),
                        this.pc.y + (h * d[i + 4]),
                        this.pc.z + (w * this.normalX * d[i])
                    );
                }
            }
            /* ==== images draw ==== */
            Diapo.prototype.draw = function () {
                // ---- visibility ----

                this.pc.projection();
                if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {
                    // ---- light ----
                    this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;
                    // ---- draw image ----
                    this.visible = true;
                    this.img.draw();
                    // ---- test pointer inside ----
                    if (pointer.hasMoved || pointer.isDown) {
                        if (
                            this.img.isPointerInside(
                                pointer.X,
                                pointer.Y
                            )
                        ) camera.over = this;
                    }
                } else this.visible = false;
                return true;
            }
            return {
                // --- load data ----
                load: function (data) {
                    window.addEventListener('load', function () {
                        ge1doot.loadJS(
                            "../static/js/imageTransform3D.js",
                            init, data
                        );
                    }, false);
                }
            }
        })().load({
            imgdata: [

                // north
                {
                    img: list_[0],
                    x: -1000,
                    y: 0,
                    z: 1500,
                    nx: 0,
                    nz: 1
                },
                {
                    img: list_[1],
                    x: 0,
                    y: 0,
                    z: 1500,
                    nx: 0,
                    nz: 1
                },
                {
                    img: list_[2],
                    x: 1000,
                    y: 0,
                    z: 1500,
                    nx: 0,
                    nz: 1
                },
                // east
                {
                    img: list_[3],
                    x: 1500,
                    y: 0,
                    z: 1000,
                    nx: -1,
                    nz: 0
                },
                {
                    img: list_[4],
                    x: 1500,
                    y: 0,
                    z: 0,
                    nx: -1,
                    nz: 0
                },
                {
                    img: list_[5],
                    x: 1500,
                    y: 0,
                    z: -1000,
                    nx: -1,
                    nz: 0
                },
                // south
                {
                    img: list_[6],
                    x: 1000,
                    y: 0,
                    z: -1500,
                    nx: 0,
                    nz: -1
                },
                {
                    img: list_[7],
                    x: 0,
                    y: 0,
                    z: -1500,
                    nx: 0,
                    nz: -1
                },
                {
                    img: list_[8],
                    x: -1000,
                    y: 0,
                    z: -1500,
                    nx: 0,
                    nz: -1
                },
                // west
                {
                    img: list_[9],
                    x: -1500,
                    y: 0,
                    z: -1000,
                    nx: 1,
                    nz: 0
                },
                {
                    img: list_[10],
                    x: -1500,
                    y: 0,
                    z: 0,
                    nx: 1,
                    nz: 0
                },
                {
                    img: list_[11],
                    x: -1500,
                    y: 0,
                    z: 1000,
                    nx: 1,
                    nz: 0
                }
            ],
            structure: [{
                // wall
                fill: {
                    r: 255,
                    g: 255,
                    b: 255,
                    light: 1
                },
                x: [-1001, -490, -490, -1001],
                z: [-500, -500, -500, -500],
                y: [500, 500, -500, -500]
            }, {
                // wall
                fill: {
                    r: 255,
                    g: 255,
                    b: 255,
                    light: 1
                },
                x: [-501, 2, 2, -500],
                z: [-500, -500, -500, -500],
                y: [500, 500, -500, -500]
            }, {
                // wall
                fill: {
                    r: 255,
                    g: 255,
                    b: 255,
                    light: 1
                },
                x: [0, 502, 502, 0],
                z: [-500, -500, -500, -500],
                y: [500, 500, -500, -500]
            }, {
                // wall
                fill: {
                    r: 255,
                    g: 255,
                    b: 255,
                    light: 1
                },
                x: [490, 1002, 1002, 490],
                z: [-500, -500, -500, -500],
                y: [500, 500, -500, -500]
            }, {
                // shadow
                fill: {
                    r: 0,
                    g: 0,
                    b: 0,
                    a: 0.2
                },
                x: [-420, 420, 420, -420],
                z: [-500, -500, -500, -500],
                y: [150, 150, -320, -320]
            }, {
                // shadow
                fill: {
                    r: 0,
                    g: 0,
                    b: 0,
                    a: 0.2
                },
                x: [-20, 20, 20, -20],
                z: [-500, -500, -500, -500],
                y: [250, 250, 150, 150]
            }, {
                // shadow
                fill: {
                    r: 0,
                    g: 0,
                    b: 0,
                    a: 0.2
                },
                x: [-20, 20, 20, -20],
                z: [-500, -500, -500, -500],
                y: [-320, -320, -500, -500]
            }, {
                // shadow
                fill: {
                    r: 0,
                    g: 0,
                    b: 0,
                    a: 0.2
                },
                x: [-20, 20, 10, -10],
                z: [-500, -500, -100, -100],
                y: [-500, -500, -500, -500]
            }, {
                // base
                fill: {
                    r: 32,
                    g: 32,
                    b: 32
                },
                x: [-50, 50, 50, -50],
                z: [-150, -150, -50, -50],
                y: [-500, -500, -500, -500]
            }, {
                // support
                fill: {
                    r: 16,
                    g: 16,
                    b: 16
                },
                x: [-10, 10, 10, -10],
                z: [-100, -100, -100, -100],
                y: [300, 300, -500, -500]
            }, {
                // frame
                fill: {
                    r: 255,
                    g: 255,
                    b: 255
                },
                x: [-320, -320, -320, -320],
                z: [0, -20, -20, 0],
                y: [-190, -190, 190, 190]
            }, {
                // frame
                fill: {
                    r: 255,
                    g: 255,
                    b: 255
                },
                x: [320, 320, 320, 320],
                z: [0, -20, -20, 0],
                y: [-190, -190, 190, 190]
            },
                {
                    img: true
                },
                {
                    // ceilingLight
                    fill: {
                        r: 255,
                        g: 128,
                        b: 0
                    },
                    x: [-50, 50, 50, -50],
                    z: [450, 450, 550, 550],
                    y: [500, 500, 500, 500]
                }, {
                    // groundLight
                    fill: {
                        r: 255,
                        g: 128,
                        b: 0
                    },
                    x: [-50, 50, 50, -50],
                    z: [450, 450, 550, 550],
                    y: [-500, -500, -500, -500]
                }
            ],
            options: {
                imagesPath: ""
            }


        });


    </script>

</head>

<body>

<canvas id="canvas"></canvas>
﻿
<div id="d1">
    <form action="" method="get">
        <input type="text" name="type" id="i1" value="" placeholder="展示你想看的"/>
        <input type="hidden" name="" id="sj" value="aj"/>
        <input type="submit" name="" id="i2" value="展示"/>
        <input type="hidden" name="" id="i3" value="返回主页"/>
    </form>

    {#            <input type="text" value="" id="i1" placeholder="展示你想看的">#}
    {#            <input type="submit" id="i2">#}

</div>
<a id="a1" href="/ " style="position: fixed;top: 0px;right: 0px;"><img src="../static/img/back.png" style="width: 60px;
            height: 60px;"></a>

</body>
{#    ﻿<script type="text/javascript">#}
{#        $("#i2").click(function(){#}
{#            list_=['www.baidu.com',]#}
{#            alert('ok')#}
{#        })#}
{#    </script>#}
</html>
